Pro JavaScript Performance: Monitoring and Visualization by Tom Barker

Author:Tom Barker
Language: eng
Format: epub
Publisher: Apress®
Published: 2012-11-03T04:00:00+00:00

Figure 5-3. TestResults object

You can see that we now have cacheTime, dnsLookupTime, pageRenderTime, perceivedTime, redirectTime, roundTripTime, and tcpConnectionTime properties for each TestResults object that we create. You can also see that these properties exist on the prototype.

This is an important point, because if you console.log the serialized object in logToServer() you will see that those properties are not serialized with the rest of the object. This is because JSON.stringify does not serialize undefined values or functions within an object.

That’s not a problem, though. To solve this, you just need to make a small private function to concatenate two objects. Sogo back to the self-executing function at the top, where you’ll add a new function jsonConcat() and have it accept two objects:

function jsonConcat(object1, object2) {}

Next loop through each property in the second object and add the properties to the first object. Finally, return the first object:

for (var key in object2) {

object1[key] = object2[key];

}

return object1;

Note that this will also overwrite the values of any properties in the first object that the two objects may have in common.

The finished function should look like this.

function jsonConcat(object1, object2) {

for (var key in object2) {

object1[key] = object2[key];

}

return object1;

}

Now to make this work, go back to logToServer(). Recall that in the beginning of the function we serialize our TestResults object this way:

var params = "data=" + (JSON.stringify(loggerPool[id]));

Change that to pass the TestResults object and its prototype into jsonConcat(), and pass the returned object to JSON.stringify:

var params = "data=" + JSON.stringify(jsonConcat(loggerPool[id],TestResults.prototype));

If you console.log the params variable, it should look like this:

data={"id":"page_render","startTime":1341152573075,"description":"timing page render","drawtopag

e":true,"logtoserver":true,"stopTime":1341152573077,"runtime":2,"url":"http://localhost:8888/

lab/perfLogger_example.html","useragent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:13.0)

Gecko/20100101 Firefox/13.0.1","perceivedTime":78,"redirectTime":0,"cacheTime":-2,"dnsLookupTime

":0,"tcpConnectionTime":0,"roundTripTime":2,"pageRenderTime":72}

Next you’ll expose these private performance variables via public methods in order to expose them via the perfLogger namespace without needing to run any tests. If you didn’t expose the variables at the object level, you would need to create a test and pull them from the test object; recall that we added these Performance object numbers to the prototype of every test object.

//expose derived performance data

perceivedTime: function(){

return _pTime;

},

redirectTime: function(){

_redirTime;

},

cacheTime: function(){

return _cacheTime;

},

dnsLookupTime: function(){

return _dnsTime;

},

tcpConnectionTime: function(){

return _tcpTime;

},

roundTripTime: function(){

return _roundtripTime;

},

pageRenderTime: function(){

return _renderTime;

}

Excellent! These public functions expose the data from the perfLogger object like so:

>>> perfLogger.perceivedTime()

78

So now your updated perfLogger.js should look like this:

var perfLogger = function(){

var serverLogURL = "savePerfData.php",

loggerPool = [],

_pTime = Date.now() - performance.timing.navigationStart || 0,

_redirTime = performance.timing.redirectEnd - performance.timing.redirectStart || 0,

_cacheTime = performance.timing.domainLookupStart - performance.timing.fetchStart || 0,

_dnsTime = performance.timing.domainLookupEnd - performance.timing.domainLookupStart || 0,

_tcpTime = performance.timing.connectEnd - performance.timing.connectStart || 0,

_roundtripTime = performance.timing.responseEnd - performance.timing.connectStart || 0,

_renderTime = Date.now() - performance.timing.domLoading || 0;

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.